<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title></title>
		<!-- element 自定义 css -->
		<link rel="stylesheet" href="../css/element.css" />
		<!-- public 自定义 css -->
		<link rel="stylesheet" href="../css/public.css" />

		<!-- 头部css -->
		<link rel="stylesheet" href="../common/css/header.css" />
		<!-- 表单css -->
		<link rel="stylesheet" href="../css/table.css" />
		<!-- 本页css -->
		<link rel="stylesheet" href="css/editPassword.css" />
		




	</head>

	<body>
		<!-- 头部嵌入 -->
		<script type="text/javascript" src="../common/header.js"></script>
		<!-- 导航 嵌入 -->
		<script type="text/javascript" src="../common/nav.js"></script>
		<div class="orderList-wrapper table-wrapper section" v-cloak>
			<div class="orderList-content-wrapper table-content-wrapper">
				<div class="serverListNav">
					<span class="nav-item">总览</span>
					<span class="nav-item">修改密码</span>
				</div>
				
				<div class="notice-wrapper fboxRow">
					<i class="icon el-icon-warning"></i>
					<p>注意账户安全，请避免将生日，电话号码等设置为密码，注意密码保护</p>
				</div>
				
				<div class="form-wrapper" style="position: relative;">
					<div class="from-title-wrapper">
						<span class="from-title">
							修改密码
						</span>
					</div>

					<div class="form-wrapper-content">
						<div class="elform-wrapper">
							<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
							  <el-form-item  label="用户ID:" prop="userId">
							    <el-input   :disabled="true" style="width: 320px;" type="id" v-model="ruleForm.userId" autocomplete="off"></el-input>
							  </el-form-item>
							  <el-form-item label="原密码:" prop="oldPass">
							    <el-input   placeholder="请输入原密码" style="width: 320px;" type="password" v-model="ruleForm.oldPass" ></el-input>
							  </el-form-item>
							  <el-form-item label="新密码:" prop="newPass">
							    <el-input  placeholder="请输入新密码" @input="changeNewPassword" style="width: 320px;" type="password" v-model="ruleForm.newPass"></el-input>
								<div v-show="showpasswordStrong" class="passwordStrong-wrapper  fboxRow">
									<span class="passwordStrong-txt">密码强度</span>
									<div :class="{'active': passwordStrongIndex >= index}" v-for="(item,index) in passwordStrongGroup" :key="item.id" class="passwordStrong-item  ml-10">
										
									</div>
								</div>
							  </el-form-item>
							  <el-form-item label="确认密码:" prop="checkPass">
							    <el-input placeholder="请确认新密码" style="width: 320px;"  type="password"  v-model="ruleForm.checkPass"></el-input>
							  </el-form-item>
							  <el-form-item>
								<ul class="explain-wrapper">
									<li class="explain-item">• 密码长度在8-20个字符</li>
									<li class="explain-item">• 只支持英文，特殊符号，数字等字符</li>
									<li class="explain-item">• 密码必须存在数字，英文</li>
									<li class="explain-item">• 不支持输入中文</li>
								</ul>
							  </el-form-item>
							  <el-form-item>
									<div @click="submitForm('ruleForm')" class="yzButton  submit"> 保存</div>
									<div  @click="resetForm('ruleForm')" class="yzButton  noColorTolight   ml-10">重置</div>
							  </el-form-item>
							</el-form>
						</div>
					</div>
				</div>
			</div>


		</div>

		<script type="application/javascript" src="../js/util.js"></script>
		<!-- vue  -->
		<script>
			
	
		  
		  
		  
			  
			
			let vmServerList = new Vue({

				el: '.orderList-wrapper',
				
				data: function() {
					let that = this
					var validateOldPass =  function(rule, value, callback){
									  // 这里666 表示 原始密码
									if (value !== '666') {
									  callback(new Error('请输入正确的原密码'));
									} else {
									  callback();
									}
								  };
								  
								  
					var validateNewPass =  function(rule, value, callback){
						console.log(value)
											if (value && !/^[0-9a-zA-Z_]{8,20}/.test(value)) {
											  callback(new Error('密码格式错误'));
											} else {
											  callback();
											}
					};
					
					var validateCheckPass =  function(rule, value, callback){
						if(value === '' || value === undefined) {
							 callback(new Error('请输入确认密码'));
							 return
						}
						if(that.ruleForm.newPass === '' || that.ruleForm.newPass === undefined) {
							callback(new Error('请先输入新密码'));
							return
						}
						console.log(that.ruleForm.newPass,value)
									if (value.toString() !== that.ruleForm.newPass.toString()) {
									  callback(new Error('请再次确认密码'));
									} else {
									  callback();
									}
					};
					
					return {
						      ruleForm: {  // 表单
								  userId: 'TF123456',
						          oldPass: undefined,
						          checkPass: undefined, // 确认密码
						          newPass: undefined,// 新密码
						        },
								rules: {
									oldPass: [
										{ required: true, message: '请输入原密码', trigger: 'blur' },
										{ validator: validateOldPass, trigger: 'blur' }
									  ],
									 newPass: [
									 	{ required: true, message: '请输入新密码', trigger: 'blur' },
									 	{ validator: validateNewPass, trigger: 'blur' }
									   ],
									checkPass: [
										{ required: true, message: '请确认新密码', trigger: 'blur' },
										{ validator: validateCheckPass, trigger: 'blur' }
									  ],
								},
								passwordStrongGroup: [{  // 密码强度
									id: 1
								},{
									id: 2
								},{
									id: 3
								}],
								showpasswordStrong: false , // 是否显示密码强度条 默认不显示
								passwordStrongIndex: undefined,   //密码强度级别   0 最低级  1 中间级  2 最高级    
					}
				},
				methods: {
					      submitForm:_throttle(function(formName) {
							  let that =  this
					        this.$refs[formName].validate(function(valid){
					          if (valid) {
								  that.$message.success('修改密码成功')
					          } else {
					            return false;
					          }
					        });
					      }),
						  // 重置表单
					      resetForm: _throttle(function(formName) {
							this.showpasswordStrong =  false // 密码强度不展示
					        this.$refs[formName].resetFields();
					      }),
						  // 监听新密码输入值改变事件
						  changeNewPassword: function(e) {
							  
							  if(!this.showpasswordStrong) {
								  this.showpasswordStrong = true
							  }else {
								  if(e.length < 8) {
								  	this.passwordStrongIndex = undefined
								  }
								  if(e.length > 8) {
									  this.passwordStrongIndex = 0
								  }
								  if(e.length > 11) {
									   this.passwordStrongIndex = 1
								  }
								  
								  if(e.length > 13) {
									   this.passwordStrongIndex = 2
								  }
							  }
								  
						  }
				},
				mounted: function() {
					
				}
			})
		</script>
	</body>
</html>
